<template>
    <div>
        <el-dialog
            title="售后详情"
            width="70%"
            :visible.sync="visible"
            :close-on-click-modal="false"
            @close="handleDialogClose">

            <div class="dialog_centent_wrap" ref="dialog_wrap">
                <!-- 售后操作 -->
                <el-card v-if="order.status===0 || order.status===3 || order.status===5" class="table_tool_bar_wrap mb10" shadow="never">

                    <div class="action">
                        <!-- 申请退款 -->
                        <div v-show="order.status===0">
                            <el-button @click="handleReject" :submitLoading="submitLoading" type="primary" size="small">商家拒绝</el-button>
                            <el-button @click="handleAgree" :submitLoading="submitLoading" type="primary" size="small">同意退款</el-button>
                        </div>
                        <!-- 商品待退货（会员提交快递信息） -->
                        <div v-show="order.status===3">
                            <el-button @click="handleRejectGoods" :submitLoading="submitLoading" type="primary" size="small">商家拒收货</el-button>
                            <el-button @click="handleConfirmGoods" :submitLoading="submitLoading" type="primary" size="small">商家确认收货</el-button>
                        </div>
                        <!-- 待退款（立即退款） -->
                        <div v-show="order.status===5">
                            <el-button @click="handleRefund" :submitLoading="submitLoading" type="primary" size="small">立即退款</el-button>
                        </div>

                    </div>
                </el-card>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">售后信息</span>
                </div>
                <div class="detail_wrap">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="4" class="table_cell_title">售后单号</el-col>
                            <el-col :span="4" class="table_cell_title">申请时间</el-col>
                            <el-col :span="4" class="table_cell_title">退款方式</el-col>
                            <el-col :span="4" class="table_cell_title">退款金额</el-col>
                            <el-col :span="4" class="table_cell_title">退款原因</el-col>
                            <el-col :span="4" class="table_cell_title">申请状态</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" class="table_cell">{{order.orderSn}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.ctime}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.returnType | formatReturnType}}</el-col>
                            <el-col :span="4" class="table_cell">￥{{order.returnAmount}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.returnReason}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.status | formatReturnStatus}}</el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">订单信息</span>
                </div>
                <div class="detail_wrap">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="4" class="table_cell_title">订单编号</el-col>
                            <el-col :span="4" class="table_cell_title">订单类型</el-col>
                            <el-col :span="4" class="table_cell_title">下单时间</el-col>
                            <el-col :span="4" class="table_cell_title">支付时间</el-col>
                            <el-col :span="8" class="table_cell_title">订单状态</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" class="table_cell">{{order.orderSn}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.orderType | formatOrderType}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.ctime}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.orderPayTime}}</el-col>
                            <el-col :span="8" class="table_cell">{{order.status | formatOrderStatus}}</el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">会员信息</span>
                </div>
                <div class="detail_wrap">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="4" class="table_cell_title">会员名称</el-col>
                            <el-col :span="4" class="table_cell_title">手机号码</el-col>
                            <el-col :span="4" class="table_cell_title"></el-col>
                            <el-col :span="4" class="table_cell_title"></el-col>
                            <el-col :span="4" class="table_cell_title"></el-col>
                            <el-col :span="4" class="table_cell_title"></el-col>
                        </el-row>
                        <el-row v-if="order.member">
                            <el-col :span="4" class="table_cell">{{order.memberUsername}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.memberPhone}}</el-col>
                            <el-col :span="4" class="table_cell"></el-col>
                            <el-col :span="4" class="table_cell"></el-col>
                            <el-col :span="4" class="table_cell"></el-col>
                            <el-col :span="4" class="table_cell"></el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">收货信息</span>
                </div>
                <div class="detail_wrap">
                    <div class="table_layout">
                        <el-row>
                            <el-col :span="4" class="table_cell_title">收件人</el-col>
                            <el-col :span="4" class="table_cell_title">手机号</el-col>
                            <el-col :span="4" class="table_cell_title">收货时间</el-col>
                            <el-col :span="12" class="table_cell_title">收件地址</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4" class="table_cell">{{order.receiveMan}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.receivePhone}}</el-col>
                            <el-col :span="4" class="table_cell">{{order.receiveTime}}</el-col>
                            <el-col :span="12" class="table_cell">
                                {{order.receiveAddress}}
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">退款商品</span>
                </div>
                <div class="detail_wrap">
                    <!-- 表格-SKU列表 -->
                    <el-table
                        ref="tableSku"
                        size="medium"
                        empty-text="暂无数据"
                        element-loading-text="给我一点时间"
                        fit border highlight-current-row
                        :data="goods">

                        <el-table-column label="规格图片" align="center" width="130">
                            <template slot-scope="scope">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.goodsSkuImg" fit="contain"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" prop="goodsSkuName" align="left" show-overflow-tooltip/>
                        <el-table-column label="价格(元)" width="120" align="center">
                            <template slot-scope="scope">
                                <span>￥{{scope.row.goodsSkuPrice}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量" width="120" align="center">
                            <template slot-scope="scope">
                                <span>{{scope.row.goodsSkuCount}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="小计(元)" width="200" align="center">
                            <template slot-scope="scope">
                                <span>￥{{scope.row.goodsSkuRealPrice}}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 合计 -->
                    <div class="total_wrap">
                        <div class="wrap">
                            <div><span>退款金额:</span><span class="amount_red">￥{{order.goodsSkuRealPrice}}</span></div>
                        </div>
                    </div>
                </div>

                <div class="divider" v-show="order.note">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">买家留言</span>
                </div>
                <div class="detail_wrap" v-show="order.note">
                    <el-alert :description="order.note" type="error" :closable="false" style="margin-bottom: 10px;height: 80px"></el-alert>
                </div>

                <div class="divider">
                    <i class="el-icon-collection-tag"></i>
                    <span class="title">售后日志</span>
                </div>
                <div class="detail_wrap" v-if="order.logs">
                    <el-steps direction="vertical" :active="order.logs.length" finish-status="success" space="60px">
                        <el-step v-for="(item, index) in order.logs" :key="index">
                            <div slot="title">
                                {{item.operateType}}
                                <span v-if="item.operateContent">
                                    【{{item.operateContent}}】
                                </span>
                            </div>
                            <div slot="description">【{{item.operateUser}}】{{item.ctime}}</div>
                        </el-step>
                    </el-steps>
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">关 闭</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false,
            submitLoading: false,
            order: {
                orderId: null,
                orderSn: null,
                orderType: null,
                orderCtime: null,
                orderPayTime: null,
                memberId: null,
                memberUsername: null,
                memberPhone: null,
                postSaleSn: null,
                returnType: null,
                returnAmount: null,
                returnReason: null,
                returnDescription: null,
                returnDescPics: null,
                status: null,
                goodsSkuId: null,
                goodsSkuImg: null,
                goodsSkuName: null,
                goodsSkuBrand: null,
                goodsSkuAttrsVals: null,
                goodsSkuCount: null,
                goodsSkuPrice: null,
                goodsSkuRealPrice: null,
                handleTime: null,
                handleNote: null,
                handleMan: null,
                receiveMan: null,
                receiveTime: null,
                receiveNote: null,
                receivePhone: null,
                receiveAddress: null,
                ctime: null,
                utime: null
            },
            goods: []
        }
    },

    methods: {
        init(id) {
            const refs = this.$refs
            this.visible = true

            this.$nextTick(() => {
                this.getInfo(id)
            })
        },

        /**
         * 详细信息
         */
        async getInfo(id) {
            if (id) {
                const res = await this.$http({
                    url: '/mall/omsorderreturnapply/getOrderReturnApplyInfo/' + id,
                    method: 'GET'
                })
                this.order = Object.assign({}, res.data)
                this.goods = [
                    {
                        goodsSkuId: this.order.goodsSkuId,
                        goodsSkuImg: this.order.goodsSkuImg,
                        goodsSkuName: this.order.goodsSkuName,
                        goodsSkuAttrsVals: this.order.goodsSkuAttrsVals,
                        goodsSkuCount: this.order.goodsSkuCount,
                        goodsSkuPrice: this.order.goodsSkuPrice,
                        goodsSkuRealPrice: this.order.goodsSkuRealPrice
                    }
                ]
            }
        },

        /**
         * 关闭窗口
         */
        handleDialogClose() {
            this.$refs.dialog_wrap.scrollTo(0,0);
        },

        /**
         * 商家拒绝申请
         */
        async handleReject() {
            const res = await this.$http({
                url: '/mall/omsorderreturnapply/reject',
                method: 'GET',
                params: {id: this.order.id}
            })
            if (this.ResultMessage(res)) {
                this.$emit('refreshDataList')
                this.submitLoading = false
                this.visible = false
            } else {
                this.submitLoading = false
            }
        },

        /**
         * 商家同意退款
         */
        async handleAgree() {
            const res = await this.$http({
                url: '/mall/omsorderreturnapply/agree',
                method: 'GET',
                params: {id: this.order.id}
            })
            if (this.ResultMessage(res)) {
                this.$emit('refreshDataList')
                this.submitLoading = false
                this.visible = false
            } else {
                this.submitLoading = false
            }
        },

        /**
         * 商家拒收货
         */
        async handleRejectGoods() {
            const res = await this.$http({
                url: '/mall/omsorderreturnapply/rejectGoods',
                method: 'GET',
                params: {id: this.order.id}
            })
            if (this.ResultMessage(res)) {
                this.$emit('refreshDataList')
                this.submitLoading = false
                this.visible = false
            } else {
                this.submitLoading = false
            }
        },

        /**
         * 商家确认收货
         */
        async handleConfirmGoods() {
            const res = await this.$http({
                url: '/mall/omsorderreturnapply/confirmGoods',
                method: 'GET',
                params: {id: this.order.id}
            })
            if (this.ResultMessage(res)) {
                this.$emit('refreshDataList')
                this.submitLoading = false
                this.visible = false
            } else {
                this.submitLoading = false
            }
        },

        /**
         * 商家发起退款
         */
        async handleRefund() {
            const res = await this.$http({
                url: '/mall/omsorderreturnapply/refund',
                method: 'GET',
                params: {id: this.order.id}
            })
            if (this.ResultMessage(res)) {
                this.$emit('refreshDataList')
                this.submitLoading = false
                this.visible = false
            } else {
                this.submitLoading = false
            }
        },

        /**
         * 删除订单
         */
        async handleDeleteOrder() {
            const res = await this.$http({
                url: '/mall/omsorderreturnapply/delete',
                method: 'POST',
                data: [this.order.id]
            })
            if (this.ResultMessage(res)) {
                this.$emit('refreshDataList')
                this.submitLoading = false
                this.visible = false
            } else {
                this.submitLoading = false
            }
        }

    },
    filters: {
        formatReturnType(value) {
            if (value === 1) {
                return '仅退款';
            } else if (value === 2) {
                return '仅退货';
            } else if (value === 3) {
                return '退货退款';
            } else {
                return '-';
            }
        },
        formatOrderType(value) {
            if (value === 0) {
                return '普通订单';
            } else if (value === 1) {
                return '活动订单';
            } else if (value === 2) {
                return '拼团订单';
            } else if (value === 3) {
                return '秒杀订单';
            } else if (value === 4) {
                return '砍价订单';
            } else if (value === 5) {
                return '核销订单';
            } else {
                return '-';
            }
        },
        formatReturnStatus(value) {
            if (value === 0) {
                return '申请退款';
            } else if (value === 1) {
                return '商家拒绝';
            } else if (value === 2) {
                return '同意退款';
            } else if (value === 3) {
                return '待退货';
            } else if (value === 4) {
                return '拒收货';
            } else if (value === 5) {
                return '待退款';
            } else if (value === 6) {
                return '退款成功';
            } else {
                return '-';
            }
        },
        formatOrderStatus(value) {
            if (value === 0) {
                return '待付款';
            } else if (value === 1) {
                return '待发货';
            } else if (value === 2) {
                return '已发货';
            } else if (value === 3) {
                return '已完成';
            } else if (value === 4) {
                return '已关闭';
            } else {
                return '-';
            }
        },
        formatDeliverType(value) {
            if (value === 0) {
                return '送货上门';
            } else if (value === 1) {
                return '到店自提';
            } else {
                return '-';
            }
        },
        formatPayType(value) {
            if (value === 0) {
                return '支付宝';
            } else if (value === 1) {
                return '微信';
            } else if (value === 2) {
                return '银联';
            } else if (value === 3) {
                return '货到付款';
            } else {
                return '-';
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.dialog_centent_wrap{
    height: 500px;
    overflow-y: auto;
    padding: 0 10px;
}
.divider{
    border-bottom: 1px solid #EBEEF5;
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
    .title{
        margin-left: 10px;
    }
}
.detail_wrap{

    .table_layout {
        margin-bottom: 20px;
        border-left: 1px solid #dcdfe6;
        border-top: 1px solid #dcdfe6;
    }

    .table_cell {
        height: 60px;
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .table_cell_title {
        border-right: 1px solid #dcdfe6;
        border-bottom: 1px solid #dcdfe6;
        padding: 10px;
        background: #f2f6fc;
        text-align: center;
        font-size: 14px;
        color: #303133;
        height: 41px;
    }

    .total_wrap{
        display: flex;
        flex-direction: column;
        border-top: 1px dashed #ccc;
        margin-top: 10px;
        padding-top: 5px;
        align-items: flex-end;
        .wrap{
            div{
                line-height: 1.5;
                width: 200px;
                display: flex;
                justify-content: center;
                padding: 20px 0;
                span:first-child{
                    display: flex;
                    min-width: 70px;
                }
                span:last-child{
                    display: block;
                }
                .amount_red{
                    color: red
                }
            }
        }
    }
}

.action{
    display: flex;
    justify-content: flex-end;
}
</style>
